<template>
  <MainLayout>
    <div class="problems-page">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-left">
          <h2>题目管理</h2>
          <p class="page-description">管理编程题目、选择题、填空题等各类题目</p>
        </div>
        <div class="header-right">
          <el-button-group>
            <el-button @click="refreshProblems">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
            <el-button
              v-if="authStore.hasAnyRole(['teacher', 'admin'])"
              type="primary"
              @click="showCreateDialog = true"
            >
              <el-icon><Plus /></el-icon>
              创建题目
            </el-button>
            <el-button
              v-if="authStore.hasAnyRole(['teacher', 'admin'])"
              type="success"
              @click="goToAIProblemGenerator"
            >
              <el-icon><Star /></el-icon>
              AI智能出题
            </el-button>
          </el-button-group>
        </div>
      </div>

      <!-- 筛选和搜索 -->
      <div class="filter-section">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="searchQuery"
              placeholder="搜索题目..."
              prefix-icon="Search"
              clearable
              @input="filterProblems"
            />
          </el-col>
          <el-col :span="4">
            <el-select v-model="typeFilter" placeholder="题目类型" clearable @change="filterProblems">
              <el-option label="全部类型" value="" />
              <el-option label="选择题" value="choice" />
              <el-option label="填空题" value="blank" />
              <el-option label="编程题" value="code" />
              <el-option label="简答题" value="short" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="difficultyFilter" placeholder="难度等级" clearable @change="filterProblems">
              <el-option label="全部难度" value="" />
              <el-option label="简单" value="easy" />
              <el-option label="中等" value="medium" />
              <el-option label="困难" value="hard" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="languageFilter" placeholder="编程语言" clearable @change="filterProblems">
              <el-option label="全部语言" value="" />
              <el-option label="Python" value="python" />
              <el-option label="C++" value="cpp" />
              <el-option label="Java" value="java" />
            </el-select>
          </el-col>
        </el-row>
      </div>

      <!-- 统计信息 -->
      <div class="stats-section">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-info">
                  <p class="stat-label">选择题</p>
                  <h3 class="stat-value">{{ choiceProblemsCount }}</h3>
                </div>
                <div class="stat-icon icon-orange">
                  <el-icon><Check /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-info">
                  <p class="stat-label">填空题</p>
                  <h3 class="stat-value">{{ blankProblemsCount }}</h3>
                </div>
                <div class="stat-icon icon-yellow">
                  <el-icon><Edit /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-info">
                  <p class="stat-label">编程题</p>
                  <h3 class="stat-value">{{ codeProblemsCount }}</h3>
                </div>
                <div class="stat-icon icon-green">
                  <el-icon><Monitor /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-info">
                  <p class="stat-label">简答题</p>
                  <h3 class="stat-value">{{ shortProblemsCount }}</h3>
                </div>
                <div class="stat-icon icon-blue">
                  <el-icon><Document /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-info">
                  <p class="stat-label">代码补全</p>
                  <h3 class="stat-value">{{ codeCompletionCount }}</h3>
                </div>
                <div class="stat-icon icon-purple">
                  <el-icon><Tools /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-info">
                  <p class="stat-label">总题目数</p>
                  <h3 class="stat-value">{{ totalProblemsCount }}</h3>
                </div>
                <div class="stat-icon icon-red">
                  <el-icon><DataAnalysis /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 题目列表 -->
      <el-card class="problems-table-card">
        <el-table
          :data="filteredProblems"
          v-loading="loading"
          style="width: 100%"
          :row-class-name="getRowClassName"
        >
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column label="题目信息" min-width="300">
            <template #default="{ row }">
              <div class="problem-info">
                <h4 class="problem-title">{{ row.title }}</h4>
                <p class="problem-description">{{ row.description }}</p>
                <div class="problem-meta">
                  <el-tag :type="getTypeTagType(row.type)" size="small">
                    {{ getTypeText(row.type) }}
                  </el-tag>
                  <el-tag :type="getDifficultyTagType(row.difficulty)" size="small">
                    {{ getDifficultyText(row.difficulty) }}
                  </el-tag>
                  <el-tag v-if="row.language" type="info" size="small">
                    {{ row.language }}
                  </el-tag>
                  <span class="points">{{ row.points }}分</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="created_by" label="创建者" width="120" />
          <el-table-column prop="created_at" label="创建时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.created_at) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button size="small" @click="viewProblem(row)">查看</el-button>
              <el-button
                size="small"
                type="success"
                @click="startProblem(row)"
              >
                做题
              </el-button>
              <el-button
                v-if="authStore.hasAnyRole(['teacher', 'admin'])"
                size="small"
                type="primary"
                @click="editProblem(row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="authStore.hasAnyRole(['teacher', 'admin'])"
                size="small"
                type="danger"
                @click="deleteProblem(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 创建题目对话框 -->
      <el-dialog
        v-model="showCreateDialog"
        title="创建新题目"
        width="800px"
        :close-on-click-modal="false"
      >
        <el-form
          ref="createFormRef"
          :model="newProblem"
          :rules="problemRules"
          label-width="100px"
        >
          <el-form-item label="题目标题" prop="title">
            <el-input v-model="newProblem.title" placeholder="请输入题目标题" />
          </el-form-item>
          
          <el-form-item label="题目描述" prop="description">
            <el-input
              v-model="newProblem.description"
              type="textarea"
              :rows="4"
              placeholder="请输入题目描述"
            />
          </el-form-item>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="题目类型" prop="type">
                <el-select v-model="newProblem.type" placeholder="请选择题目类型" @change="onTypeChange">
                  <el-option label="选择题" value="choice" />
                  <el-option label="填空题" value="blank" />
                  <el-option label="编程题" value="code" />
                  <el-option label="简答题" value="short" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="难度等级" prop="difficulty">
                <el-select v-model="newProblem.difficulty" placeholder="请选择难度">
                  <el-option label="简单" value="easy" />
                  <el-option label="中等" value="medium" />
                  <el-option label="困难" value="hard" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="分值" prop="points">
                <el-input-number v-model="newProblem.points" :min="1" :max="100" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="newProblem.type === 'code'">
              <el-form-item label="编程语言" prop="language">
                <el-select v-model="newProblem.language" placeholder="请选择语言">
                  <el-option label="Python" value="python" />
                  <el-option label="C++" value="cpp" />
                  <el-option label="Java" value="java" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 选择题选项 -->
          <div v-if="newProblem.type === 'choice'">
            <el-form-item label="选项" prop="options">
              <div v-for="(option, index) in newProblem.options" :key="index" class="option-item">
                <el-input
                  v-model="newProblem.options[index]"
                  :placeholder="`选项 ${String.fromCharCode(65 + index)}`"
                >
                  <template #prepend>{{ String.fromCharCode(65 + index) }}</template>
                </el-input>
                <el-button @click="removeOption(index)" type="danger" size="small">删除</el-button>
              </div>
              <el-button @click="addOption" type="primary" size="small">添加选项</el-button>
            </el-form-item>
            <el-form-item label="正确答案" prop="answer">
              <el-select v-model="newProblem.answer" placeholder="请选择正确答案">
                <el-option
                  v-for="(option, index) in newProblem.options"
                  :key="index"
                  :label="`${String.fromCharCode(65 + index)}. ${option}`"
                  :value="String.fromCharCode(65 + index)"
                />
              </el-select>
            </el-form-item>
          </div>

          <!-- 填空题答案 -->
          <el-form-item v-if="newProblem.type === 'blank'" label="正确答案" prop="answer">
            <el-input v-model="newProblem.answer" placeholder="请输入正确答案，多个答案用逗号分隔" />
          </el-form-item>

          <!-- 简答题答案 -->
          <el-form-item v-if="newProblem.type === 'short'" label="参考答案" prop="answer">
            <el-input
              v-model="newProblem.answer"
              type="textarea"
              :rows="3"
              placeholder="请输入参考答案"
            />
          </el-form-item>

          <!-- 编程题测试用例 -->
          <div v-if="newProblem.type === 'code'">
            <el-form-item label="测试用例" prop="test_cases">
              <div v-for="(testCase, index) in newProblem.test_cases" :key="index" class="test-case-item">
                <el-card>
                  <div class="test-case-header">
                    <span>测试用例 {{ index + 1 }}</span>
                    <el-button @click="removeTestCase(index)" type="danger" size="small">删除</el-button>
                  </div>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-input
                        v-model="testCase.input"
                        type="textarea"
                        :rows="2"
                        placeholder="输入"
                      />
                    </el-col>
                    <el-col :span="12">
                      <el-input
                        v-model="testCase.output"
                        type="textarea"
                        :rows="2"
                        placeholder="期望输出"
                      />
                    </el-col>
                  </el-row>
                </el-card>
              </div>
              <el-button @click="addTestCase" type="primary" size="small">添加测试用例</el-button>
            </el-form-item>
          </div>
        </el-form>
        
        <template #footer>
          <el-button @click="showCreateDialog = false">取消</el-button>
          <el-button type="primary" @click="createProblem" :loading="creating">
            创建题目
          </el-button>
        </template>
      </el-dialog>


    </div>
  </MainLayout>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { problemsApi, type Problem } from '@/api/problems'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Refresh, Plus, Document, Monitor, Check, User, Edit, Tools, DataAnalysis, Star } from '@element-plus/icons-vue'
import MainLayout from '@/layouts/MainLayout.vue'

const router = useRouter()
const authStore = useAuthStore()

// 跳转到AI智能出题页面
const goToAIProblemGenerator = () => {
  router.push('/ai-problem-generator')
}

const problems = ref<Problem[]>([])
const loading = ref(false)
const showCreateDialog = ref(false)
const creating = ref(false)

// 筛选和搜索
const searchQuery = ref('')
const typeFilter = ref('')
const difficultyFilter = ref('')
const languageFilter = ref('')

// 新题目表单
const newProblem = ref({
  title: '',
  description: '',
  type: '' as 'choice' | 'blank' | 'code' | 'short',
  difficulty: 'medium' as 'easy' | 'medium' | 'hard',
  points: 10,
  language: '',
  answer: '',
  options: ['', '', '', ''],
  test_cases: [{ input: '', output: '' }]
})



// 表单验证规则
const problemRules = {
  title: [{ required: true, message: '请输入题目标题', trigger: 'blur' }],
  description: [{ required: true, message: '请输入题目描述', trigger: 'blur' }],
  type: [{ required: true, message: '请选择题目类型', trigger: 'change' }],
  difficulty: [{ required: true, message: '请选择难度等级', trigger: 'change' }],
  points: [{ required: true, message: '请输入分值', trigger: 'blur' }],
  answer: [{ required: true, message: '请输入答案', trigger: 'blur' }]
}

// 计算属性
const filteredProblems = computed(() => {
  return problems.value.filter(problem => {
    const matchesSearch = !searchQuery.value || 
      problem.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      problem.description.toLowerCase().includes(searchQuery.value.toLowerCase())
    
    const matchesType = !typeFilter.value || problem.type === typeFilter.value
    const matchesDifficulty = !difficultyFilter.value || problem.difficulty === difficultyFilter.value
    const matchesLanguage = !languageFilter.value || problem.language === languageFilter.value
    
    return matchesSearch && matchesType && matchesDifficulty && matchesLanguage
  })
})

const codeProblemsCount = computed(() => 
  problems.value.filter(p => p.type === 'code').length
)

const choiceProblemsCount = computed(() => 
  problems.value.filter(p => p.type === 'choice').length
)

const blankProblemsCount = computed(() => 
  problems.value.filter(p => p.type === 'blank').length
)

const shortProblemsCount = computed(() => 
  problems.value.filter(p => p.type === 'short').length
)

const codeCompletionCount = computed(() => 
  problems.value.filter(p => p.type === 'code_completion' as any).length
)

const totalProblemsCount = computed(() => 
  problems.value.length
)

const myProblemsCount = computed(() => 
  problems.value.filter(p => p.created_by === authStore.user?.id).length
)

// 工具函数
const getTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    choice: '选择题',
    blank: '填空题',
    code: '编程题',
    short: '简答题',
    code_completion: '代码补全'
  }
  return typeMap[type] || type
}

const getTypeTagType = (type: string) => {
  const typeMap: Record<string, string> = {
    choice: 'success',
    blank: 'warning',
    code: 'primary',
    short: 'info',
    code_completion: 'danger'
  }
  return typeMap[type] || ''
}

const getDifficultyText = (difficulty: string) => {
  const difficultyMap: Record<string, string> = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return difficultyMap[difficulty] || difficulty
}

const getDifficultyTagType = (difficulty: string) => {
  const difficultyMap: Record<string, string> = {
    easy: 'success',
    medium: 'warning',
    hard: 'danger'
  }
  return difficultyMap[difficulty] || ''
}

const formatDate = (dateStr: string) => {
  return new Date(dateStr).toLocaleDateString('zh-CN')
}

const getRowClassName = ({ row }: { row: Problem }) => {
  if (row.created_by === authStore.user?.id) {
    return 'my-problem-row'
  }
  return ''
}

// 方法
const loadProblems = async () => {
  loading.value = true
  try {
    const response = await problemsApi.getProblems()
    problems.value = response.problems || []
  } catch (error) {
    console.error('加载题目失败:', error)
    ElMessage.error('加载题目失败')
    problems.value = []
  } finally {
    loading.value = false
  }
}

const refreshProblems = () => {
  loadProblems()
}

const filterProblems = () => {
  // 过滤逻辑已在computed中实现
}

const viewProblem = (problem: Problem) => {
  router.push(`/problems/${problem.id}`)
}

const startProblem = (problem: Problem) => {
  // 根据题目类型跳转到不同的页面
  switch (problem.type) {
    case 'choice':
      router.push(`/problems/choice/${problem.id}`)
      break
    case 'blank':
      router.push(`/problems/blank/${problem.id}`)
      break
    case 'short':
      router.push(`/problems/short/${problem.id}`)
      break
    case 'code':
      router.push(`/problems/code/${problem.id}`)
      break
    case 'code_completion' as any:
      router.push(`/problems/code_completion/${problem.id}`)
      break
    default:
      router.push(`/problems/${problem.id}`)
  }
}

const editProblem = (problem: Problem) => {
  ElMessage.info('编辑功能开发中...')
}

const deleteProblem = async (problem: Problem) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除题目"${problem.title}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await problemsApi.deleteProblem(problem.id)
    ElMessage.success('删除成功')
    loadProblems()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除题目失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 创建题目相关方法
const onTypeChange = () => {
  // 重置相关字段
  newProblem.value.answer = ''
  newProblem.value.language = ''
  if (newProblem.value.type === 'choice') {
    newProblem.value.options = ['', '', '', '']
  } else if (newProblem.value.type === 'code') {
    newProblem.value.test_cases = [{ input: '', output: '' }]
  }
}

const addOption = () => {
  newProblem.value.options.push('')
}

const removeOption = (index: number) => {
  if (newProblem.value.options.length > 2) {
    newProblem.value.options.splice(index, 1)
  }
}

const addTestCase = () => {
  newProblem.value.test_cases.push({ input: '', output: '' })
}

const removeTestCase = (index: number) => {
  if (newProblem.value.test_cases.length > 1) {
    newProblem.value.test_cases.splice(index, 1)
  }
}

const createProblem = async () => {
  creating.value = true
  try {
    const problemData = {
      ...newProblem.value,
      options: newProblem.value.type === 'choice' ? newProblem.value.options : undefined,
      test_cases: newProblem.value.type === 'code' ? newProblem.value.test_cases : undefined
    }
    
    await problemsApi.createProblem(problemData)
    ElMessage.success('题目创建成功')
    showCreateDialog.value = false
    loadProblems()
    
    // 重置表单
    newProblem.value = {
      title: '',
      description: '',
      type: '' as 'choice' | 'blank' | 'code' | 'short',
      difficulty: 'medium' as 'easy' | 'medium' | 'hard',
      points: 10,
      language: '',
      answer: '',
      options: ['', '', '', ''],
      test_cases: [{ input: '', output: '' }]
    }
  } catch (error) {
    console.error('创建题目失败:', error)
    ElMessage.error('创建题目失败')
  } finally {
    creating.value = false
  }
}



onMounted(() => {
  loadProblems()
  
  // 检查URL参数，如果是创建模式则显示创建对话框
  const urlParams = new URLSearchParams(window.location.search)
  if (urlParams.get('action') === 'create') {
    showCreateDialog.value = true
  }
})
</script>

<style scoped lang="scss">
.problems-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;

  .header-left {
    h2 {
      margin: 0 0 8px 0;
      color: #2c3e50;
      font-size: 1.8rem;
      font-weight: bold;
    }

    .page-description {
      margin: 0;
      color: #7f8c8d;
      font-size: 1rem;
    }
  }

  .header-right {
    .el-button-group {
      .el-button {
        display: flex;
        align-items: center;
        gap: 6px;
      }
    }
  }
}

/* 筛选区域 */
.filter-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

/* 统计卡片 */
.stats-section {
  margin-bottom: 30px;

  .stat-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 200px; // 增加卡片高度，确保图标完全显示

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .stat-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 25px 20px; // 增加上下内边距
      height: 100%;
      text-align: center;

      .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        color: white;
        margin-bottom: 15px; // 增加图标和文字之间的间距

        &.icon-blue { background: linear-gradient(135deg, #3498db, #2980b9); }
        &.icon-green { background: linear-gradient(135deg, #2ecc71, #27ae60); }
        &.icon-orange { background: linear-gradient(135deg, #f39c12, #e67e22); }
        &.icon-purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
        &.icon-yellow { background: linear-gradient(135deg, #f1c40f, #f39c12); }
        &.icon-red { background: linear-gradient(135deg, #e74c3c, #c0392b); }
      }

      .stat-info {
        .stat-label {
          color: #7f8c8d;
          font-size: 0.9rem;
          margin-bottom: 6px;
          font-weight: 500;
          white-space: nowrap;
        }

        .stat-value {
          font-size: 1.6rem;
          font-weight: bold;
          color: #2c3e50;
          margin: 0;
          line-height: 1;
        }
      }
    }
  }
}

/* 题目列表 */
.problems-table-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .problem-info {
    .problem-title {
      margin: 0 0 8px 0;
      color: #2c3e50;
      font-size: 1.1rem;
      font-weight: 600;
    }

    .problem-description {
      margin: 0 0 12px 0;
      color: #7f8c8d;
      font-size: 0.9rem;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .problem-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;

      .points {
        color: #e74c3c;
        font-weight: 600;
        font-size: 0.9rem;
      }
    }
  }
}

/* 我的题目行样式 */
:deep(.my-problem-row) {
  background-color: #f8f9fa;
}

/* 创建题目对话框 */
.option-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;

  .el-input {
    flex: 1;
  }
}

.test-case-item {
  margin-bottom: 15px;

  .test-case-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: 600;
    color: #2c3e50;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .problems-page {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;

    .header-left {
      text-align: center;
    }

    .header-right {
      display: flex;
      justify-content: center;
    }
  }

  .filter-section {
    .el-row {
      .el-col {
        margin-bottom: 15px;
      }
    }
  }

  .stats-section {
    .el-col {
      margin-bottom: 20px;
    }

    .stat-card {
      height: 150px; // 中等屏幕增加高度

      .stat-content {
        padding: 20px 15px; // 增加上下内边距

        .stat-info {
          .stat-label {
            font-size: 0.85rem;
          }

          .stat-value {
            font-size: 1.4rem;
          }
        }

        .stat-icon {
          width: 50px;
          height: 50px;
          font-size: 1.5rem;
          margin-bottom: 10px; // 增加间距
        }
      }
    }
  }

  .problem-info {
    .problem-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
    }
  }
}

@media (max-width: 480px) {
  .page-header {
    .header-left {
      h2 {
        font-size: 1.5rem;
      }
    }
  }

  .stat-card {
    height: 140px; // 小屏幕增加高度

          .stat-content {
        padding: 15px 12px; // 增加上下内边距

      .stat-info {
        .stat-label {
          font-size: 0.8rem;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 1.3rem;
        }
      }

              .stat-icon {
          width: 45px;
          height: 45px;
          font-size: 1.3rem;
          margin-bottom: 8px; // 增加间距
      }
    }
  }
}
</style>
